<template>
  <div class="xxbody">
    <ul class="top">
      <li v-for="(v,i) in newobj" :key="i">
        <img :src="v.imgurl" alt="">
        <p>{{v.title}}</p>
      </li>
    </ul>
    <div class="bigbox" v-for="(v,i) in arr" :key="i">
      <div class="shijian">
      {{v.time}}
    </div>
    <div class="one">
        <div class="d1">
          <van-icon name="bullhorn-o" class="icon"/>
          系统公告
        </div>
        <div class="d2">
          {{v.text1 | xiaoming}}
        </div>
        <div class="d3">
         {{v.text2 |xiaobai}}
        </div>
        <div class="d4">
          <span class="s1">查看详情</span>
          <van-icon name="arrow" class="s2"/>
        </div>
    </div>
    </div>
    
  </div>
</template>

<script>
import link from "@/api/link.js"
export default {
  data(){
    return{
      obj:[],
      arr:{}
    }
  },
  created(){
    link("/user/wkc/twodata").then((ok)=>{
      this.obj=ok.data.icon
    }),
    link("/user/wkc/fivedata").then((ok)=>{
      this.arr=ok.data.obj
      // console.log(this.arr)
    })
  },
  filters:{
    xiaoming(val){
      if(val.length>16){
        return val.slice(0,15)+"..."
      }else{
        return val
      }
    },
    xiaobai(val){
      if(val.length>38){
        return val.slice(0,37)+"..."
      }else{
        return val
      }
    }
  },
  computed:{
    newobj(){
      
      return this.obj.slice(0,8)
    }
  }
}
</script>

<style scoped lang="scss">
  .xxbody{
    width: 100%;
    height: 100%;
    background-color: #f1f0f5;
    .top{
      width: 100%;
      height: 1.14rem;
      display: flex;
      overflow-x: auto;
      background-color: white;
      li{
        width: 23%;
        height: 100%;
        flex-shrink: 0;
        text-align: center;
        font-size: 0;
        img{
          width: 40%;
          height: 40%;
          vertical-align: top;
        }
        p{
          font-size: 0.14rem;
          text-align: center;
          margin-top: 0.15rem;
        }
      }
    }
    .bigbox{
      width: 100%;
      height: 100%;
      .shijian{
      width: 100%;
      height: 0.52rem;
      text-align: center;
      line-height: 0.52rem;
      font-size: 0.16rem;
    }
    .one{
      width: 90%;
      margin: auto;
      height: 1.86rem;
      background-color: white;
      border-radius: 0.1rem;
      
      .d1{
        width: 90%;
        margin: auto;
        height: 0.52rem;
        display: flex;
        font-size: 0.16rem;
        line-height: 0.52rem;
        color: #3b5a75;
        .icon{
          font-size: 0.2rem;
          line-height: 0.52rem;
          color: #00a386;
          margin-right: 0.1rem;
        }
      }
      .d2{
        width: 90%;
        margin: auto;
        height: 0.3rem;
        line-height: 0.3rem;
        font-size: 0.18rem;
        font-weight:700; 
      }
      .d3{
        width: 90%;
        margin: auto;
        height: 0.62rem;
        font-size: 0.16rem;
        border-bottom: 0.01rem solid #bababa;
        color: #bababa;
      }
      .d4{
        width: 90%;
        height: 0.42rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        .s1{
          height: 0.42rem;
          font-size: 0.18rem;
          font-weight: 700;
          line-height: 0.42rem;
        }
        .s2{
          font-size: 0.2rem;
          line-height: 0.42rem;
          color: #ececec;
        }
      }
    }
    }
    
  }
</style>